<template>
		<view class="body">
			<!-- 销售顾问分享 和  客户分享 -->
			<view class="sales_consultant" v-if="showlucky">
				<view class="avatar">
					<image class="avatar_header":src="header"></image>
				</view>
				<view class="information">
					<view class="name">{{callname}}</view>
					<view class="tel">
						<image style="height:20upx; width:12upx; margin-right: 10upx;" src="../../static/consultant/phone.png"></image>
						{{phone}}
					</view>
				</view>
				<view class="call">
					<text class="call_name">销售顾问</text>
				</view>
			</view>
			<view class="money_bg"  v-if="!showlucky">
				<image class="money-bg" src="../../static/consultant/money.png"></image>
				<image class="lucky" src="../../static/consultant/invite_you.png"></image>
			</view>
			<!-- 活动倒计时 -->
			<view class="countdown">
				<view class="countdown_header" v-if="finish">活动倒计时</view>
				<view class="times" v-if="dayd==1">
					<text class="date">{{day}}</text>
					<text>天</text>
					<text class="date">{{minute}}</text>
					<text>分</text>
					<text class="date">{{second}}</text>
					<text>秒</text>
				</view>
				<view class="times" v-else-if="dayd==0">
					<text class="date">{{hour}}</text>
					<text>时</text>
					<text class="date">{{minute}}</text>
					<text>分</text>
					<text class="date">{{second}}</text>
					<text>秒</text>
				</view>
				<view class="times" v-else="dayd==2">
					<view class="end">活动结束</view>
				</view>
			</view>
			<!-- 活动 -->
			<view class="active" ref="a">
				<view class="subject">
					{{title}}
				</view>
				<!-- 活动图 -->
				<view class="diagram">
					<image class="active_diagram" :src="img"></image>
				</view>
				<view class="give_money">
					<view class="partake">
						<text class="price">￥{{money}}</text>
						<text class="number">已报名{{people}}人</text>
					</view>
					<view class="grasp_btn">{{grasp}}</view>
				</view>
				<view class="apply_bg">
					<view class="description">{{text}}</view>	
				</view>
			</view>
			<view class="reward">
				<view class="participate">
					<text class="font">参与活动</text><text>获得奖励</text>
				</view>
				<view class="merchant">
					<text>汇买车平台</text>
				</view>
			</view>
			<!-- 掌邦技术支持 -->
			<view class="support">
				<image class="zanboon" src="../../static/consultant/zanboon-width.png"></image>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				header:'../../static/header.jpg',
				callname:'李大伟',
				phone:'123456789',
				showlucky:true,
				finish:true,
				day:'38',
				hour:'24',
				minute:'45',
				second:'13',
				dayd:1,
				title:'我是活动名字来来来分是奥恩阿瓦让百度二十',
				img:'../../static/huodongliebiao/activity_diagram.png',
				money:'99.00',
				people:'98',
				grasp:'了解详情',
				text:'报名可享：我是报名好处，一般不超过30个字，啦啦啦厉害',
			}
		},
		onReady(){
			// let that=this;
			console.log(123);
			console.log(this.$refs.a,'654');
			// that.row=that.$refs.a.$el.clientHeight;	
		},
		onShow(){
			uni.getSystemInfo({
				success: function (res) {
					console.log(res.screenHeight,'手机高度');
				}
			});
			// this.timel();
		},
		methods:{
			timel(){
				let that=this;
				//设置倒计时的日期
				var countDownDate=new Date("2019-10-30 15:57:30").getTime();
				//每1秒钟更新一次计数
				var x = setInterval(function(){
					//获取今天的日期和时间
					var now = new Date().getTime();
					//找到现在和倒计时日期之间的距离
					var distance = countDownDate-now;
					//时间计算的天，小时，分钟和秒
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
					console.log(days + '天' + hours + '时' + minutes + '分' + seconds + '秒');
					that.day=days;
					that.hour=hours;
					that.minute=minutes;
					that.second=seconds;
					if(distance<=0){
						console.log('活动结束');
						that.finish=false;
						that.dayd=2;
						
						clearTimeout(x);
					}else if(days>=1){
						that.dayd=1;
					}else if(days<1){
					    that.dayd=0;
					}
				},1000);
			}
		}
		}
		
</script>

<style>
	page{
		background: url(../../static/consultant/bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 1448upx;
  
	}
	.turntable{
		/* position: fixed; */
	}
	.body:before{
		content: '';
		display: table;
	}
	.sales_consultant{
		display: flex;
		justify-content: center;
		margin-top:50upx ;
		/* margin-left: 30upx; */
	}	
		.avatar{
			display: flex;
			flex-direction: column;
		}
			.avatar_header{
				height: 120upx;
				width: 120upx;
				border-radius: 50%;
			}
		.information{
			display: flex;
			justify-content: center;
			flex-direction: column;
			width:398upx;
			color: #FFFFFF;
			margin-left: 20upx;
		}
			.name{
				font-size: 30upx;
			}
			.tel{
				font-size: 28upx;
			}
		.call{
			display: flex;
			justify-content: center;
			flex-direction: column;
		}
			.call_name{
				background-image:linear-gradient(#FFA23F, #FFA23F);
				color: #FFFFFF;
				font-size: 28upx;
				padding: 6upx 20upx;
				border-radius: 4upx;
			}
	.money_bg{
	}
		.money-bg{
			height:126upx; 
			width: 622upx;
			margin-top: 36upx;
			margin-right:66upx;
			margin-left:62upx ;
		}
		.lucky{
			position: absolute;
			top:56upx;
			height: 86upx;
			width: 398upx; 
			left: 178upx;
		}
	.countdown{
		display: flex;
		justify-content: center;
		color:#FBFBFB;
		font-size: 28upx;
		margin-top: 66upx;
		/* border: 1upx solid #0062CC; */
		margin-bottom: 20upx;
	}
		.countdown_header{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.times{
			display: flex;
			justify-content: center;
			align-items: center;
			/* margin-left: 20upx; */
		}
			.date{
				color: #FF6360;
				font-size: 48upx;
				background-color: #FFF23C;
				border-radius: 4upx;
				padding: 2upx 12upx;
				margin: 0upx 10upx;
			}
			.end{
				font-size: 48upx;
			}
	.active{
		margin: 0upx 30upx;
		background: #FFFFFF;
		border-radius: 20upx;
		/* border: 1upx solid #007AFF; */
		padding-bottom: 20upx;
	}
		.subject{
			color: #333333;
			font-size: 32upx;
			background:linear-gradient(rgba(254,49,70,0.21) 0%,rgba(216,216,216,0) 100%);
			padding: 22upx;
		}
		.diagram{
			margin: 0upx 22upx;
			/* background:linear-gradient(rgba(254,49,70,0.21) 0%,rgba(216,216,216,0) 100%); */
		}
			.active_diagram{
				height: 392upx;
				width: 650upx;
			}
		.give_money{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0upx  22upx;
			height: 110upx;
			/* margin-bottom:20upx; */
			/* border: 1upx solid #000000; */
		}
			.partake{
				display: flex;
				flex-flow: column;
			}
				.price{
					position: relative;
					color:#FE0400 ;
					font-size: 40upx;
					left:-10upx;
				}
				.number{
					color: #666666;
					font-size: 22upx;
				}
			.grasp_btn{
				color: #FFFFFF;
				background: #D53D34;
				font-size: 30upx;
				border-radius:4upx;
				padding: 10upx 25upx;	
			}
		.apply_bg{
			margin: 10upx 22upx;
			border-radius: 4upx;
			background-color:#FFE9E9;
			font-size: 28upx;
			color:#ED5858;
		}
			.description{
				padding: 12upx;
			}
		.reward{
			/* position: relative; */
			display: flex;
			flex-flow:column;
			float: right;
			margin-right: 30upx;
		}
			.participate{
				background:rgba(227,58,73,1);
				border-radius:10px;
				padding: 8upx 90upx;
				color: #FFFFFF;
				font-size: 30upx;
				margin-bottom: 16upx;
				margin-top: 58upx;
			}
			.font{
				margin-right: 20upx;
			}
			.merchant{
				display: flex;
				justify-content: center;
				font-size: 22upx;
				color:rgba(255,255,255,0.6);
			}
	.support{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-top: 336upx;
		/* margin-bottom:30upx; */
	}
		.zanboon{
			height: 28upx;
			width: 216upx;
		}
</style>
